<style type="text/css" media="all">
	.quote {
		position: relative;
		width: 280px;
		padding: 5px;
		background: rgba(197, 206, 207, 0.24);
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
		margin-top: 10px;
		margin-bottom: 10px;
		border: 1px solid rgba(197, 206, 207, 0.44);
	}
    .quoteTitle{
    	background-color: #FFFF80;
    }
	.referTitle {
		background-color: #FFFF8B;
	}
    div.ref {
	border: 1px solid #ddd;
	margin: 0 0 10px 0;
	padding: 2px;
	font-size: 9pt;
	background: #FFFEC8;
    }
	div.ref h4 {
		margin: 0;
		padding: 1px 3px;
		background: #CC9966;
		color: #fff;
		font-size: 10pt;
	}

	div.ref p {
	margin: 0;
	padding: 2px;
	line-height: 20px;
	color: #666;
	font-size: 9pt;
	}

	div.ref p img {
	display: none;
	width: 0;
	height: 0;
	}

</style>

<script id="blogCommentListTemplate" type="text/x-jquery-tmpl">
<div class="tweetList" data-commentAuthorId="<%=authorid%>" data-commentId="<%=id%>">
	<div class="tweetListImg">
		<img src=<%=portrait%> onerror="javascript:this.src='../base/img/widget_dface.ing';" />
	</div>
	<div class="tweetContent">
		<div>
			<span class="tweetListissuer"><%=author%></span>
		</div>
		
		<div class="tweetListTit h5">
		<%
			if(typeof refers !== "undefined")  {
				if(refers){ 
		%>
				   <div class="quote">
				<%
                   _.each(refers, function(replie) { 
				%>
                  <div class="quoteTitle"><%=replie.title%></div>
                  <div class="quoteBody"><%=replie.body%></div>			
		<% });%> 
             </div>
        <%} }%>
        <%=content%>
         </div>	
		<div class="tweetListInfo h6">
			<div><%=moment(pubDate, "YYYY-MM-DD HH:mm:ss").fromNow()%></div>
		</div>
	</div>
</div>

</script>

<!-- header -->
<header class="bar-title">
	<div class="left-banner">
		<span class="homeBtn icon-home imgsize"></span>
	</div>
	<h1 class="title">网友评论</h1>
	<div class="right-banner">
		<span class="refreshBtn icon-repeat imgsize"></span>
	</div>

</header>

<!-- uncomment this if you want a sencondary-bars

<nav class="bar-standard bar-header-secondary"></nav>
-->
<!-- content -->

<div class="content">
<list id="blog_comment_list" 
    autoLoad="false"
    isPullDownRefresh="true"  
    jsonRoot="commentlist"
    bundle="fs"
    paging="true"
    iScroll="true"
    _itemTemplate="blogCommentListTemplate"></list>
</div>

<script id="footerTemplate" type="text/x-underscore-template">
<footer class="footer-menu-detail" data-value=<%=url%> data-id=<%=id%> data-active = <%=activeIndex%>></footer>
</script>